<!doctype html>
<html>
<head>

<title>My Book List</title>
<script language="javaScript" src="jquery-1.7.1.min.js">
</script>

</head>
<body>
<h1>My Book List</h1>
<input type='button' onClick='fun()' value="click">


<script type="text/javascript">
var books =[
  {title: 'The Design of EveryDay Things',
  img: 'http://ecx.images-amazon.com/images/I/41j2ODGkJDL._AA115_.jpg',
   author: 'Don Norman',
   alreadyRead: false
  },
  {title: 'The Most Human Human',
  img: 'http://ecx.images-amazon.com/images/I/41Z56GwEv9L._AA115_.jpg',
   author: 'Brian Christian',
   alreadyRead: true
}];

function fun(){
  
  myOl = $('<ol>');
  myDiv = $('<div>');
//ciclo donde recorre cada elemento del arreglo books
  $.each(books, function(index, elem) {
    //se guarda elem en book.
    var book = elem;
    //arreglo de las etiquetas UL
    myUl = $('<ul>');
    //agrega a li lo que tiene despues d + 
    myUl.append('<li>' + elem.title + '</li>' );
    myUl.append('<li>' + elem.author + '</li>' );
    myUl.append('<li><img src= "' + elem.img + '"></li>');
    myUl.appendTo(myOl);
  });
  myOl.appendTo(myDiv);
  myDiv.appendTo($('body'));
}

</script>
</body>
</html>
